<!-- 评论弹窗触发按钮 -->
<button id="openCommentModal" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
    查看评论（3）
</button>

<!-- 评论弹窗模态框 -->
<div id="commentModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="min-h-screen bg-black bg-opacity-70 flex items-center justify-center">
        <div class="bg-white w-full max-w-3xl rounded-lg p-6">
            <!-- 弹窗头部 -->
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-gray-800">文章评论</h2>
                <button id="closeCommentModal" class="text-gray-500 hover:text-gray-700">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <!-- 评论输入框 -->
            <form class="mb-6">
                <div class="flex space-x-4">
                    <img src="https://picsum.photos/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                    <div class="flex-1">
            <textarea
                    id="commentInput"
                    class="w-full px-3 py-2 rounded-md border border-gray-300 focus:outline-none focus:border-blue-600 resize-none"
                    placeholder="写下你的评论...">
            </textarea>
                    </div>
                    <button type="button" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        发布
                    </button>
                </div>
            </form>

            <!-- 评论列表 -->
            <div class="space-y-6">
                <!-- 单个评论 -->
                <div class="flex items-start space-x-4">
                    <img src="https://picsum.photos/40/40" alt="用户头像" class="w-10 h-10 rounded-md object-cover">
                    <div class="flex-1">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <h3 class="font-medium text-sm">张三</h3>
                                <p class="text-xs text-gray-500">1小时前</p>
                            </div>
                            <button class="text-gray-500 hover:text-gray-700">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                     stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M6 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
                                </svg>
                            </button>
                        </div>
                        <p class="text-gray-600 mb-3">
                            非常精彩的分析！AI对就业市场的影响确实需要提前布局应对。
                        </p>
                        <div class="flex items-center space-x-4 text-sm">
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-gray-700">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                     stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M14.25 9V5.25A3.75 3.75 0 1010.5 5.25v3.75m5.25 0v6.75A3.75 3.75 0 1010.5 18v-6.75m5.25 0h.008v.008H18v-.008h-.008v-.008zm0 10.5A3.75 3.75 0 0018 19.5a3.75 3.75 0 00-3.75-3.75 3.75 3.75 0 003.75 3.75z"/>
                                </svg>
                                <span>24</span>
                            </button>
                            <button class="flex items-center space-x-1 text-gray-500 hover:text-gray-700">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                     stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                                </svg>
                                <span>回复</span>
                            </button>
                        </div>

                        <!-- 子评论 -->
                        <div class="mt-4 pl-6 space-y-4">
                            <div class="flex items-start space-x-3">
                                <img src="https://picsum.photos/32/32" alt="用户头像"
                                     class="w-8 h-8 rounded-full object-cover">
                                <div class="flex-1">
                                    <div class="flex justify-between items-start mb-1">
                                        <div>
                                            <h4 class="font-medium text-xs flex items-center">
                                                李明远
                                                <span class="ml-2 px-1 py-0.5 text-xs rounded-full bg-blue-100 text-blue-600">作者</span>
                                            </h4>
                                            <p class="text-xs text-gray-500">30分钟前</p>
                                        </div>
                                    </div>
                                    <p class="text-gray-600 text-sm mb-2">
                                        感谢认可！教育改革和社会安全网确实是关键方向。
                                    </p>
                                    <div class="flex items-center space-x-4 text-xs">
                                        <button class="flex items-center space-x-1 text-gray-500 hover:text-gray-700">
                                            <i class="fa-solid fa-thumbs-up"></i>
                                            <span>8</span>
                                        </button>
                                        <button class="flex items-center space-x-1 text-gray-500 hover:text-gray-700">
                                            <i class="fa-solid fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 更多评论 -->
                <div class="text-center">
                    <button class="px-6 py-2 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors">
                        加载更多评论
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>